<template>
  <div>
    <v-charts :options="options"  style="width:100%;height:400px" autoresize />
  </div>
</template>

<script>

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import 'echarts/lib/component/graphic'
import { getAction } from '@api/manage'

export default {
  name: "SchoolClasstimeProportion",
  components:{
    'v-charts': ECharts
  },
  props:{
    date: {
      type: String,
      default: () => []
    }
  },
  data(){
    return {
      url:{
        classTimeList:"index/schoolIndex/listClasstimeByYear",
        classTimeProportion: "index/schoolIndex/classTimeProportionByYear"
      },
      options:{
        title: {
          textAlign: 'center',
          x:'center',
          y:'top',
          text: '全校各类课时占比'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '全校各类课时占比',
            type: 'pie',
            selectedMode: 'single',
            radius: ['50%', '70%'],
            clockwise: false,
            label: {
              normal: {
                position: 'outside',
                formatter: '{b}\n{c} ({d}%)'
              }
            },
            data: []
          }
        ],
        graphic: { // 添加原生图形元素组件
          elements: [{
            type: 'text', // 组件类型
            left: 'center', //定位
            top: '43%', // 定位
            style: { // 样式
              text: '总课时', //文字
              fontSize: 13, //文字大小
              textAlign: 'center', //定位
              width: 30,
              height: 30,
              fill: 'darkgray' // 字体颜色
            }
          },
            {
              type: 'text',
              left: 'center',
              top: '52%',
              style: {
                text: '',
                fontSize: 18,
                textAlign: 'center',
                width: 30,
                height: 25,
                fill: '#3BA5D9'
              }
            }]
        }
      }
    }
  },
  created() {
    console.log("created")
    this.loadData();
  },
  watch:{
    date: function (){
      this.loadData();
    }
  },
  methods: {
    loadData: function (){
      console.log(this.url.classTimeProportion)
      getAction(this.url.classTimeProportion, { date: this.date}).then((res) => {
        if (res.success) {
          console.log(res.result);
          this.options.series[0].data = res.result.proportions;
          console.log(this.options.series.data);
          this.options.graphic.elements[1].style.text = res.result.total;
          console.log(this.options);
        }
        // console.log(this.options)
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    }
  },

}
</script>

<style scoped>

</style>